{% extends 'base.html' %}

{% load static %}

{% block title %}{{ title }} - 数据可视化{% endblock %}

{% block page_title %}{{ CHART_TITLE_3 }}{% endblock %}

{% block breadcrumb_active %}数据可视化 / {{ CHART_TITLE_3 }}{% endblock %}

{% block content %}
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">二手房房屋朝向分布情况</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="satisfactionChart" style="min-height: 150px; height: 180px; max-height: 200px; max-width: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">重庆主地区二手房平均面积</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="orderStatusChart" style="min-height: 150px; height: 180px; max-height: 200px; max-width: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block extra_js %}
<script>
    // 1. 二手房房屋朝向分布情况 - 柱状图
    var satisfactionCtx = document.getElementById('satisfactionChart').getContext('2d');
    var orientationChart = new Chart(satisfactionCtx, {
        type: 'bar',
        data: {
            labels: ['南北', '南', '东南', '东', '西', '东北', '北', '西北'],
            datasets: [{
                label: '数量',
                data: [1850, 1620, 1250, 980, 850, 720, 680, 540],
                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: '二手房房屋朝向分布情况',
                    font: {
                        size: 16
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed !== null) {
                                label += context.parsed.y + ' 套';
                            }
                            return label;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '数量（套）'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '朝向'
                    }
                }
            }
        }
    });

    // 2. 重庆主地区二手房平均面积 - 柱状图
    var orderStatusCtx = document.getElementById('orderStatusChart').getContext('2d');
    var areaChart = new Chart(orderStatusCtx, {
        type: 'bar',
        data: {
            labels: ['渝北区', '江北区', '南岸区', '渝中区', '九龙坡区', '沙坪坝区', '大渡口区', '北碚区'],
            datasets: [{
                label: '平均面积（平方米）',
                data: [95, 89, 92, 85, 98, 87, 90, 102],
                backgroundColor: 'rgba(75, 192, 192, 0.7)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: '重庆主地区二手房平均面积',
                    font: {
                        size: 16
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed !== null) {
                                label += context.parsed.y + ' 平方米';
                            }
                            return label;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '面积（平方米）'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '地区'
                    }
                }
            }
        }
    });
</script>
{% endblock %}